<!DOCTYPE html>
<html>
<!-- 
  TEMPLATE EXAMPLE: VARIABLES
  This example demonstrates how to define and use template variables.
-->

<!-- Define variables using the template:var comment -->
<!-- template:var title="Variable Example" username="John Doe" company="Acme Corp" year="2023" -->

<head>
    <title>{{title}}</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; }
        .example { border: 1px solid #ddd; padding: 15px; margin: 20px 0; }
        .code { background: #f8f8f8; padding: 10px; font-family: monospace; }
    </style>
</head>
<body>
    <h1>{{title}}</h1>
    
    <div class="example">
        <h2>Basic Variable Replacement</h2>
        <p>Hello, my name is <strong>{{username}}</strong>.</p>
        <p>I work at <strong>{{company}}</strong>.</p>
        <p>Copyright © {{year}}</p>
        
        <h3>How it works:</h3>
        <div class="code">
            <p>Define variables in HTML comments:<br>
            &lt;!-- template:var username="John Doe" company="Acme Corp" year="2023" --&gt;</p>
            
            <p>Then use them with double curly braces:<br>
            Hello, my name is <strong>&#123;&#123;username&#125;&#125;</strong>.</p>
        </div>
    </div>
    
    <div class="example">
        <h2>Variable Concatenation</h2>
        <p>{{username}} from {{company}}.</p>
        <p>This is a {{title}} created in {{year}}.</p>
        
        <h3>How it works:</h3>
        <div class="code">
            <p>Variables can be combined with regular text:<br>
            &#123;&#123;username&#125;&#125; from &#123;&#123;company&#125;&#125;.</p>
        </div>
    </div>
</body>
</html> 